<template>
<!-- 菜单 -->
  <div class="interview-skills">
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>添加菜单</el-button>
      </div>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题" width="300">
          <template #default='{row}'>
            <span class="el-icon-folder-opened" style="font-size:16px;margin-right: 5px;" v-show='row.is_point!==true&&row.pid===null'></span>
            <span class="el-icon-document-remove" style="font-size:16px;margin-right: 5px;margin-left: 20px;" v-show='row.pid!==null&&row.is_point!==true'></span>
            <span class="el-icon-view" style="font-size:16px;margin-right: 5px;margin-left: 40px;" v-show='row.is_point===true&&row.pid!==null'></span>
            <span class="el-icon-view" style="font-size:16px;margin-right: 5px;margin-left: 0px;" v-show='row.is_point===true&&row.pid===null'></span>
            {{row.title}}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="900"></el-table-column>
        <el-table-column label="操作" width="" align='center'>
          <template #default="{row}">
           <el-button type="primary" icon="el-icon-edit" circle @click='recompose(row)'></el-button>
           <el-button type="danger" icon="el-icon-delete" circle @click='remove(row)'></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 菜单对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="150px" class="demo-ruleForm">
        <el-form-item label="权限组名称" prop="is_point">
          <el-radio v-model="formData.is_point" label="false" :disabled="title==='编辑菜单'?true:false">菜单</el-radio>
          <el-radio v-model="formData.is_point" label="true" :disabled="title==='编辑菜单'?true:false">权限点</el-radio>
        </el-form-item>
        <el-form-item label="权限组名称" prop="pid">
         <el-select v-model="pid_value" style="width:350px" placeholder='请选择' v-show='!JSON.parse(formData.is_point)' @change="selectChange()">
           <el-option v-for="item in title_options" :key="item.title"
            :label="item.title" :value="item.title" :style="`text-indent:${item.pid===0?14:item.pid!==null&&item.pid!==0?42:28}px`"></el-option>
         </el-select>
         <el-select v-model="pid_value" style="width:350px" placeholder='请选择' v-show='JSON.parse(formData.is_point)' @change="selectChange()">
           <el-option v-for="item in title_options" :key="item.title"
            :label="item.title" :value="item.title" :style="`text-indent:${item.pid===0?14:item.pid!==null&&item.pid!==0?42:28}px`"
            :disabled="Boolean(item.disabled)"></el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="formData.code" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="formData.title" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, update } from '@/api/base/menus'
export default {
  created(){
    this.getlist()
  },
  data () {
    return {
      oldTableDate:[],//原始数据
      tableData: [],//列表渲染数据
      texttitle:[],
      textIndent:{0:[],20:[],40:[]},
      articledialogVisible:false,//文章弹出对话框
      id:'',
      formData:{
        code:'',
        id:'',
        is_point:'false',
        pid:'',
        title:'',
      },//用户弹出对话框绑定的数据
      pid_value:'主导航',
      title_options:[{pid:0,title:'主导航',disabled:'flase'}],//用户弹出对话框//权限组名称
      title:'',//用户弹出对话框标题
      rules:{
        code:[
      { required:true,message:'权限代码不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '权限代码首尾不能为空格', trigger: 'blur' }
      ],
        title:[
      { required:true,message:'权限标题不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '权限标题首尾不能为空格', trigger: 'blur' }
      ]
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(){
      this.tableData=[]
      const {data}=await list()
      this.oldTableDate=data
      console.log(this.oldTableDate);
      //父层
      data.forEach(item=>{
        this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
        //子层
        if(item.childs){
          item.childs.forEach(item=>{
           this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
           //孙层
           if(item.points){
             item.points.forEach(item=>{
              this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
             })
           }else if(item.childs){
             item.childs.forEach(item=>{
              this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
             })
           }
          })
        }else if(item.points){
          item.points.forEach(item=>{
           this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
           //孙层
           if(item.childs){
             item.childs.forEach(item=>{
              this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
             })
           }else if(item.points){
             item.points.forEach(item=>{
              this.tableData.push({code:item.code,id:item.id,pid:item.pid,title:item.title,is_point:item.is_point})
             })
           }
          })
        }
      })
      console.log(this.tableData);
      this.tableData.forEach(item=>{
        this.texttitle.push(item.title)
      })
    },
    //#添加功能
    async Visible(){
      this.title='创建菜单'
      this.articledialogVisible=true
      this.pid_value='主导航'
      this.title_options=[{pid:0,title:'主导航',disabled:false}]
      this.tableData.forEach(item=>{
        if(!item.is_point){
          this.title_options.push({pid:item.pid,title:item.title})
        }
      })
      console.log(this.title_options);
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.title_options=[]
      this.title_options=[{pid:0,title:'主导航',disabled:false}]
      this.pid_value=''
      this.formData={
        code:'',
        id:'',
        is_point:'false',
        pid:'',
        title:'',
      }
    },
    selectChange(){
      console.log(this.pid_value)
      const findtitle=this.tableData.find(item=>this.pid_value===item.title)
      this.formData.pid=findtitle.id
    },
    //确定按钮
    async confirm(){
      try {await this.$refs.formData.validate()} catch (error) {return}
      this.formData.is_point=JSON.parse(this.formData.is_point)
      if(this.title==='创建菜单'){
        console.log(this.formData);
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist()
        } catch (error) {
          console.log(error);
        }
      }else{
        console.log(this.formData);
        try {
          await update(this.formData)
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist()
        } catch (error) {
          console.log(error);
        }
      }
    },
    //#编辑修改功能
    async recompose(row){
      this.title='编辑菜单'
      console.log(row);
      this.formData.title=row.title
      this.formData.code=row.code
      this.formData.id=row.id
      this.formData.is_point=(!row.is_point===true?"false":"true")
      console.log(this.formData.is_point);
      this.pid_value=row.title
      this.tableData.forEach(item=>{
        if(!item.is_point){
          this.title_options.push({pid:item.pid,title:item.title})
        }
      })
      console.log(this.title_options);
      this.oldTableDate.forEach(item_a=>{
        if(item_a.title===row.title)return this.pid_value='主导航'
        if(item_a.childs){
         item_a.childs.forEach((item_b,index_b)=>{
           if(item_b.title===row.title)return this.pid_value=item_a.title
            if(item_a.childs[index_b].points){
               item_a.childs[index_b].points.forEach(item_c=>{
                 if(item_c.title===row.title)return this.pid_value=item_b.title
               })
            }
         })
        }
      })
      this.articledialogVisible=true
    },
    //#删除功能
    remove(row){
        this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            try {
              const res= await remove(row)
              console.log(res);
              this.$message.success('删除成功')
              this.getlist()
            } catch (error) {
              console.log(error);
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
  },
  //监听权限名称的变化
  watch:{
    formData:{
      immediate:true,
      deep:true,
      handler(newVal,oldVal){
        console.log(newVal.is_point);
        console.log(this.tableData);

        if(newVal.is_point==='true'){
        this.title_options=[{pid:0,title:'主导航',disabled:false}]
        this.tableData.forEach(item=>{
          if(!item.is_point){
            if(!item.pid&&item.id!==28){
              this.title_options.push({pid:item.pid,title:item.title,disabled:true})
              }else if(item.pid||item.id===28){
              this.title_options.push({pid:item.pid,title:item.title,disabled:false})
              }
          }
        })
        console.log(this.title_options);
        }else{
        this.title_options=[{pid:0,title:'主导航',disabled:'flase'}]
        this.tableData.forEach(item=>{
          if(!item.is_point){
            this.title_options.push({pid:item.pid,title:item.title,disabled:'flase'})
          }
        })
        console.log(this.title_options);
        }
      }
    },
  },
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
    .hm-mm-top-right{
      float: right;
      margin-bottom: 20px;
    }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    float: right;
    margin-right: 100px;
    margin-top: 50px;
   }
  }
  ::v-deep .cell{
     .el-button--primary{
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }
    .el-button--primary:hover{
      color: #ecf5ff !important;
      background: #409eff !important;
    }
    .el-button--danger{
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    }
    .el-button--danger:hover{
      color: #ecf5ff !important;
      background: #f56c6c !important;
    }
  }
}
</style>

